<template>
  <div class="search">
    <!-- 导航栏，用于返回上一页 -->
    <van-nav-bar title="商品搜索"
                 left-arrow
                 @click-left="$router.go(-1)" />

    <!-- 搜索输入框 -->
    <van-search v-model="search"
                show-action
                placeholder="请输入搜索关键词"
                clearable>
      <template #action>
        <!-- 点击搜索按钮执行搜索操作 -->
        <div @click="goSearch(search)">搜索</div>
      </template>
    </van-search>

    <!-- 搜索历史 -->
    <div class="search-history">
      <div class="title">
        <span>最近搜索</span>
        <!-- 点击清空历史记录按钮 -->
        <van-icon name="delete-o"
                  size="16"
                  @click="clear" />
      </div>
      <div class="list"
           v-if="history.length">
        <!-- 显示搜索历史记录列表 -->
        <div class="list-item"
             v-for="item in history"
             :key="item"
             @click="goSearch(item)">
          {{ item }}
        </div>
      </div>
      <div class="tips"
           v-else>暂无记录</div>
    </div>
  </div>
</template>

<script>
import { getHistoryList, setHistoryList } from '@/utils/storage'

export default {
  name: "SearchIndex",
  data () {
    return {
      search: "",
      history: getHistoryList(), // 从本地存储获取搜索历史记录
    };
  },
  methods: {
    // 执行搜索操作
    goSearch (key) {
      console.log(key);
      // 查找关键词在搜索历史中的位置
      let index = this.history.indexOf(key);
      if (index !== -1) {
        // 如果关键词已存在于搜索历史中，将其删除
        this.history.splice(index, 1);
      }
      // 将关键词添加到搜索历史的开头
      this.history.unshift(key);
      this.search = ''; // 清空搜索输入框
      setHistoryList(this.history); // 将更新后的搜索历史保存到本地存储

      // 跳转到搜索结果页面，并传递搜索关键词作为参数
      this.$router.push(`/searchlist?search=${key}`);
    },
    // 清空搜索历史记录
    clear () {
      this.history = []; // 清空搜索历史数组
      setHistoryList([]); // 清空本地存储中的搜索历史记录
      this.$toast.success('清空历史记录'); // 显示成功提示
    }
  },
};
</script>

<style lang="less" scoped>
.search {
  .searchBtn {
    background-color: #fa2209;
    color: #fff;
  }
  ::v-deep .van-search__action {
    background-color: #c21401;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 5px 5px 0;
    margin-right: 10px;
  }
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  .title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
  }
  .list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 10px;
    gap: 5%;
  }
  .list-item {
    width: 30%;
    text-align: center;
    padding: 7px;
    line-height: 15px;
    border-radius: 50px;
    background: #fff;
    font-size: 13px;
    border: 1px solid #efefef;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 10px;
  }
  .tips {
    text-align: center;
    margin-top: 20px;
  }
}
</style>